<template>
  <div class="info">
    <!-- 文档页面请求输入框 -->
    <el-row :gutter="10" class="info-row">
      <el-col :span="20">
        <h4>{{ form.name }}</h4>
      </el-col>
      <el-col :span="4">
        <el-button @click="toOperation" type="primary" plain>运行</el-button>
        <el-button type="danger" plain @click="toDelete">删除</el-button>
      </el-col>
    </el-row>
    <div class="info-content">
      <span class="info-content_type"
        :style="{ color: methodStyle[form.method], background: methodStyle[form.method] + '22' }">{{
          form.method }}</span>
      <span class="info-content_url">{{ form.url }}</span>
      <span class="info-content_status"><el-icon :style="{ color: statusStyle[form.status] }">
          <StarFilled />
        </el-icon>{{ form.status || '无状态' }}</span>
      <v-md-preview :text="'说明：' + (form.description || '暂无说明')" />
    </div>

  </div>
</template>

<script setup lang="ts">
import * as DebugApi from '@/api/debug'
import { propTypes } from '@/utils/propTypes'
import { StarFilled } from '@element-plus/icons-vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const message = useMessage()
const { t } = useI18n() // 国际化
const emit = defineEmits(['to-operation', 'delete-node'])
const props = defineProps({
  data: propTypes.object.def({}),
  editor: propTypes.bool.def()
})
watch(() => props.data, (newVal, oldVal) => {
  if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
    init()
  }
}, {
  deep: true
})
let form = ref({} as any)
const methodStyle = ref({
  'GET': '#17b26a',
  'POST': '#ef6820',
  'DELETE': '#f04438',
  'PUT': '#2e90fa',
})
const statusStyle = ref({
  '已完成': '#17b26a',
  '测试中': '#ef6820',
  '将废弃': '#aaaaaa',
  '开发中': '#2e90fa',
})
const toOperation = () => {
  emit('to-operation')
}
const toDelete = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm(`确定删除【${props.data.title}】接口？`)
    // 发起删除
    await DebugApi.deleteApiInTree({ id: props.data.id, projectId: projectId.value })
    message.success(t('common.delSuccess'))
    // 更新tab和树数据
    emit('delete-node', props.data)
  } catch (error) {

  } finally {

  }
}
const init = () => {
  if (props.data) {
    form.value.url = props.data.info.url
    form.value.method = props.data.info.requestType
    form.value.name = props.data.title
    form.value.status = props.data.status
    switch (form.value.status) {
      case 1:
        form.value.status = '已完成'
        break;
      case 2:
        form.value.status = '测试中'
        break;
      case 3:
        form.value.status = '将废弃'
        break;
      case 4:
        form.value.status = '开发中'
        break;
    }
    form.value.description = props.data.description
  }
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
:deep(.github-markdown-body) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(.el-input-group__prepend) {
  padding: 0;

  .el-select {
    width: 120px;
    margin: 0;

  }
}

.info {
  &-row {
    h4 {
      margin: 0;
      line-height: 32px;
    }

    margin-bottom: 10px;
  }

  &-content {
    font-size: 14px;

    &_type {
      display: inline-block;
      padding: 2px 5px;
      border-radius: 4px;
    }

    &_url {
      margin: 0 10px;
    }

    &_status {
      .el-icon {
        margin: 0 5px 0 0;
        position: relative;
        top: 2px;
      }
    }
  }

  &-desc {
    font-size: 14px;
  }
}
</style>
